<%--
  Created by IntelliJ IDEA.
  User: 申忠帅
  Date: 2021/4/14
  Time: 16:07
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<html>
<head>
    <title>Title</title>
    <link href="../../static/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="../../static/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <style>
        .bitPic {
            width: 60px;
            height: 60px;
        }
    </style>
</head>
<body>
<form action="product?opr=admSava" method="post">
    <table  align="center" class="table table-hover table-bordered">
        <tr>
            <td colspan="7">
                <!--text-center  文本居中 -->
                <h1 style="text-align: center">修改商品信息</h1>
            </td>
        </tr>

        <tr>
            <td>一级分类</td>
            <td class="left">
                <input type="hidden" name="id" value="${comdityAdm.id}">
                <select name="categoryLevel1Id" id="categoryLevel1Id" class="form-control">
                    <option>请选择..</option>
                    <c:forEach items="${list}" var="item">
                        <c:if test="${item.id ne comdityAdm.categoryLevel1Id}">
                            <option value="${item.id}">${item.name}</option>
                        </c:if>
                        <c:if test="${item.id eq comdityAdm.categoryLevel1Id}">
                            <option value="${item.id}" selected>${item.name}</option>
                        </c:if>
                    </c:forEach>
                </select>

            </td>
        </tr>
        <tr>
            <td>二级分类</td>
            <td class="left">
                <select name="two" id="two" class="form-control">
                    <option>请选择..</option>
                    <c:forEach items="${list2}" var="item">
                        <c:if test="${item.id eq comdityAdm.categoryLevel2Id}">
                            <option value="${item.id}" selected>${item.name}</option>
                        </c:if>
                        <c:if test="${item.id ne comdityAdm.categoryLevel2Id}">
                            <option value="${item.id}">${item.name}</option>
                        </c:if>
                    </c:forEach>
                </select>
            </td>
        </tr>
        <tr>
            <td>三级分类</td>
            <td class="left">
                <select name="three" id="three" class="form-control">
                    <option>请选择..</option>
                    <c:forEach items="${list3}" var="item">
                        <c:if test="${item.id eq comdityAdm.categoryLevel3Id}">
                            <option value="${item.id}" selected>${item.name}</option>
                        </c:if>
                        <c:if test="${item.id ne comdityAdm.categoryLevel3Id}">
                            <option value="${item.id}">${item.name}</option>
                        </c:if>
                    </c:forEach>
                </select>
            </td>
        </tr>

        <tr>
            <td>商品名称</td>
            <td>
                <input type="text" class="form-control" id="name" name="name" value="${comdityAdm.name}">
            </td>
        </tr>

        <tr>
            <td>图片</td>
            <td>
                <img id="imgshow" src="/static/img/${comdityAdm.fileName}" class="bitPic">
                <input id="filed" type="file" class="select" src="/static/img/${comdityAdm.fileName}">
            </td>
        </tr>

        <tr>
            <td>库存</td>
            <td>
                <input type="text" class="form-control" id="stock" name="stock" value="${comdityAdm.stock}">
            </td>
        </tr>
        <tr>
            <td>价格</td>
            <td>
                <input type="text" class="form-control" id="price" name="price" value="${comdityAdm.price}">
            </td>
        </tr>
        <tr>
            <td colspan="5">
                <p style="text-align: center">
                    <button type="submit" class="btn btn-primary">提交</button>&nbsp;&nbsp;&nbsp;
                    <button type="reset" class="btn btn-primary">取消</button>
                </p>
            </td>
        </tr>
    </table>
</form>
<script src="../../static/js/jquery.min.js"></script>
<script src="../../static/js/bootstrap.min.js"></script>
<script>
    $("#categoryLevel1Id").change(function(){
        // alert($("#categoryLevel1Id").val())
        $.ajax({
            url: 'product?opr=two',
            type: 'post',
            async: false,
            data: {
                id:$("#categoryLevel1Id").val()
            },
            dataType: 'json',
            success: function (data) {
                // console.log(data)
                $("#two").empty();/* empty()方法是将标签option中的值置成空 */
                $("#two").append("<option>请选择..</option>");
                for (let i = 0;i<data.length;i++){
                    /* append()可以同时传入多个节点或字符串，没有返回值 */
                    $("#two").append("<option value="+data[i].id+">"+data[i].name+"</option>");
                }
            }
        })
    })

    $("#two").change(function(){
        $.ajax({
            url: 'product?opr=three',
            type: 'post',
            async: false,
            data: {
                ids:$("#two").val()
            },
            dataType: 'json',
            success: function (data) {
                $("#three").empty();
                $("#three").append("<option>请选择..</option>");
                for (let i = 0;i<data.length;i++){
                    $("#three").append("<option value="+data[i].id+">"+data[i].name+"</option>");
                }
            }
        })
    });
    //在input file内容改变的时候触发事件
    $('#filed').change(function(){
        //获取input file的files文件数组;
        //$('#filed')获取的是jQuery对象，.get(0)转为原生对象;
        //这边默认只能选一个，但是存放形式仍然是数组，所以取第一个元素使用[0];
        var file = $('#filed').get(0).files[0];
        //创建用来读取此文件的对象
        var reader = new FileReader();
        //使用该对象读取file文件
        reader.readAsDataURL(file);
        //读取文件成功后执行的方法函数
        reader.onload=function(e){
            //读取成功后返回的一个参数e，整个的一个进度事件
            console.log(e);
            //选择所要显示图片的img，要赋值给img的src就是e中target下result里面
            //的base64编码格式的地址
            $('#imgshow').get(0).src = e.target.result;
        }

    })
    $("#submit").click(function () {
        $.ajax({
            url:'',
            type:'post',
            data:{

            },
            dataType:'json',
            success:function () {

            }
        })
    })
</script>
</body>
</html>
